<template>
  <div ref="chart" wh-full></div>
</template>
<script setup>
import useChart from '@/hooks/UseCharts'
const chart = ref(null)
const { setOption, showLoading } = useChart(chart, { autoChartSize: true })
const props = defineProps({
  comData: {
    type: Array,
    default: () => {
      return []
    }
  },
  unit: {
    type: String,
    default: () => {
      return ''
    }
  },
  // 图例间距
  legendGap: {
    type: Number,
    default: () => {
      return 20
    }
  },
  showLegend: {
    type: Boolean,
    default: true
  },
  title:{
    type:[String,Number],
    default:''
  },
  showTitle:{
    type:Boolean,
    default:false
  }
})
const chartOption = computed(() => ({
  color: ['#03E984', '#0268EA', '#EAB602', '#EA3E02'],
  title:{
    show:props.showTitle,
    text:props.title,
    left:'center',
    top:'center'
  },
  legend: {
    show: props.showLegend,
    icon: 'circle',
    x: 'center',
    bottom: 2,
    itemWidth: 12,
    itemHeight: 12,
    align: 'left',
    itemGap: props.legendGap,
    textStyle: {
      fontSize: 14
    }
  },
  tooltip: {
    trigger: 'item',
    formatter: params =>
      `${params.name}<br/>${params.percent ? params.percent : 0}%`
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '60%'],
      center: ['50%', props.showLegend ? '45%' : '50%'],
      hoverAnimation: true,
      selectedMode: 'single',
      selectedOffset: 10,
      clockwise: true,
      data: props.comData,
      itemStyle: {
        normal: {
          borderColor: '#fff',
          borderWidth: 3
        }
      },
      labelLine: {
        normal: {
          length: 20,
          length2: 30
        }
      },
      label: {
        textStyle: {
          align: 'left'
        },
        formatter: params =>
          `{a|${params.percent ? params.percent : 0}%}\n{b|${params.name} }`,
        rich: {
          icon: {
            fontSize: 14
          },
          a: {
            fontSize: 14,
            padding: [0, 0, 5, 0]
          },
          b: {
            fontSize: 14
          }
        }
      }
    },
    // {
    //   // 短刻度节点线
    //   type: 'gauge',
    //   startAngle: 270, // 270
    //   endAngle: -89.9999,
    //   radius: '85%',
    //   center: ['50%', props.showLegend ? '45%' : '50%'],
    //   axisTick: {
    //     show: false
    //   },
    //   axisLabel: {
    //     show: false
    //   },

    //   splitNumber: '60', // 42
    //   axisLine: {
    //     show: false,
    //     lineStyle: {
    //       color: [
    //         [1, '#1755ff'] // 01ADF8 1755ff
    //       ],
    //       width: 10
    //     }
    //   },
    //   splitLine: {
    //     length: 12,
    //     lineStyle: {
    //       width: 2,
    //       color: '#01ADF8',
    //       distance: 5
    //     }
    //   },
    //   detail: {
    //     show: false
    //   }
    // }
  ]
}))
onMounted(() => {
  showLoading()
})
watch(
  () => props.comData,
  () => {
    setOption(chartOption.value)
  }
)
</script>
<style lang="scss" scoped></style>
